<template>
  <div class="shoppingPurchase">
    <!-- recipient address -->
    <el-row :span="24" class="recipient">
      <el-collapse  v-model="abc">
        <el-collapse-item title="请选择收货地址" name="1">
          <div class="project" v-for="(item,index) in addrList" :key="index">
            <div class="projectLeft">{{item.name}}<span class="phone">手机号码：{{item.phone}}</span></div>
            <div class="projectContent"></div>
            <div class="projectRight green">
              <span style="display:inline-block;width:300px;text-overflow:ellipsis; white-space:nowrap; overflow:hidden;">地址：{{item.province}}{{item.city}}{{item.area}}&nbsp;&nbsp;&nbsp;{{item.addr}}</span>
              <el-radio style="float:right" :label="item.id" v-model="user.addrID">{{input}}</el-radio></div>
          </div>
        </el-collapse-item>
      </el-collapse>
    </el-row>
    <!-- purchase information -->
    <el-row :span="24" class="purchase">
      <div class="title">购买信息</div>
      <div class="content">
        <el-col :span="6" class="purchaseImg">
          <img style="width:100%" class="pImg" src="../../assets/imgs/pdetail1.png" alt="">
        </el-col>
        <el-col :span="18" class="purchaseInfo">
          <div class="topPart">
            <span>{{ productInfo.productName }}</span>
          </div>
          <div class="amount">
            <span>数量：{{productInfo.amount}}</span>
            <el-input-number size="small" v-model="productInfo.amount" :min="1" :max="999" ></el-input-number>
          </div>
          <div class="price-info"><span>¥{{newPrice}}</span><span>¥{{productInfo.productPrice}}</span></div>
        </el-col>
        <el-col :span="24" class="purchasePrice">
          <span style="font-size:10px; float:left;color:#ccc;margin-left:5px;">公司会在72小时之内发货，请关注物流信息</span>
          <span>合计：¥</span>{{ calcPrice }}
        </el-col>
      </div>
    </el-row>
    <!-- pay method -->
    <el-row :span="24" class="payMethod">
      <!-- <div class="title">选择支付银行卡</div> -->
      <!-- select bankcard -->
      <el-collapse  accordion  v-model="ab">
        <el-collapse-item title="请选择支付的银行卡" name="2">
          <div class="project" v-for="(item,index) in bankCardList" :key="index">
            <div class="projectLeft">{{item.bankName}}<span class="phone">尾号{{item.bankCardNo.substring(item.bankCardNo.length-4)}}</span>
            <el-radio style="float:right"  :label="item.id" v-model="user.bankID">{{input}}</el-radio></div>
            <!-- <div class="projectContent"></div> -->
            <!-- <div class="projectRight green"></div> -->
          </div>
        </el-collapse-item>
      </el-collapse>
      <!-- add bankcard -->
      <!-- <div class="addBankcard" @click="toBankcard()">
        <i>加</i>
        添加银行卡
      </div> -->
    </el-row>
    <!-- submit button -->
    <el-row :span="24" class="submit">
      <el-button type="danger" @click="newOrder">提交订单</el-button>
    </el-row>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  beforeCreate () {
  },
  created () {
    this.Pid = window.localStorage.Pid
    this.userInfo = this.$store.state.user
    this.$http.post('http://218.104.153.143:8089/numberone-auth/busiUserAddr/userAddrList.shtml', { token: this.$store.state.token }, {
      headers: {'Content-Type': 'application/x-www-form-urlencoded'},
      emulateJSON: true
    }).then((data) => {
      this.addrList = data.body.addrList
      this.addrList.forEach(i => {
        if (i.isDefault) {
          this.user.addrID = i.id
        }
      })
    }, (ne) => {
      this.$message({
        message: '网络错误',
        type: 'error',
        duration: 1000,
        showClose: false
      })
    })
    this.$http.post('http://218.104.153.143:8089/numberone-auth/busiUser/bankCardList.shtml', { token: this.$store.state.token }, {
      headers: {'Content-Type': 'application/x-www-form-urlencoded'},
      emulateJSON: true
    }).then((data) => {
      this.bankCardList = data.body.bankCardList
      if (this.bankCardList.length) {
        this.user.bankID = this.bankCardList[0].id
      }
    }, (ne) => {
      this.$message({
        message: '网络错误',
        type: 'error',
        duration: 1000,
        showClose: false
      })
    })
    this.$http.post('http://218.104.153.143:8089/numberone-auth/busiProduct/getMarkProduct.shtml', { token: this.$store.state.token }, {
      headers: {'Content-Type': 'application/x-www-form-urlencoded'},
      emulateJSON: true
    }).then((data) => {
      this.productInfo = data.body.productInfo
      this.$store.dispatch('setPrice', data.body.productInfo.productPrice)
      this.calcPrice = data.body.productInfo.productPrice
    }, (ne) => {
      this.$message({
        message: '网络错误',
        type: 'error',
        duration: 1000,
        showClose: false
      })
    })
    this.$http.post('http://218.104.153.143:8089/numberone-auth/busiUser/getUserInfo.shtml', { token: this.$store.state.token }, {
      headers: {'Content-Type': 'application/x-www-form-urlencoded'},
      emulateJSON: true
    }).then((data) => {
      if (data.body.userInfo.userIDCard) {
        this.idCard = data.body.userInfo.userIDCard
      }
    }, (ne) => {
      this.$message({
        message: '网络错误',
        type: 'error',
        duration: 1000,
        showClose: false
      })
    })
  },
  watch: {
    calcPrice: {
      deep: true,
      handler () {
        console.log(this.productInfo.price)
      }
    }
  },
  data () {
    return {
      idCard: null,
      user: {
        addrID: null,
        bankID: null
      },
      addrList: [],
      input: '',
      productInfo: {
        productName: '',
        productPrice: '',
        productID: '',
        amount: ''
      },
      userInfo: {},
      Pid: '',
      abc: '1',
      ab: '2'
    }
  },
  methods: {
    selectBankcard () { // 选取银行卡
      this.$router.push('/user/address')
    },
    toBankcard () { // 跳转添加银行卡
      this.$router.push('/user/bankcard')
    },
    newOrder () {
      //  生成订单
      if (!this.user.addrID) {
        this.$message({
          message: '请选择收货地址，如未添加收货地址,请先添加收货地址',
          type: 'error',
          duration: 2000,
          showClose: false
        })
        return false
      }
      if (!this.user.bankID) {
        this.$message({
          message: '请选择银行卡，如未绑定银行卡,请先添加银行卡',
          type: 'error',
          duration: 2000,
          showClose: false
        })
        return false
      }
      if (!this.idCard) {
        this.$confirm('需完善个人资料才可以下订单', '提示', {
          confirmButtonText: '去完善',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$router.push('/user/writeData')
        }).catch(() => {

        })
        return false
      }
      let obj = {}
      obj.token = this.$store.state.token
      obj.addrID = this.user.addrID
      obj.productID = this.productInfo.productID
      obj.productNum = this.productInfo.amount
      this.$http.post('http://218.104.153.143:8089/numberone-auth/busiOrderDtl/genOrder.shtml', obj, {
        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
        emulateJSON: true
      }).then((data) => {
        if (data.body.success === '订单生成成功') {
          let o = {}
          o.orderSsn = data.body.orderInfo.orderSsn
          o.bankID = this.user.bankID
          o.token = this.$store.state.token
          this.newPay(o)
        } else {
          this.$message({
            message: data.body.error,
            type: 'error',
            duration: 2000,
            showClose: false
          })
        }
      }, (ne) => {
        this.$message({
          message: '网络错误',
          type: 'error',
          duration: 1000,
          showClose: false
        })
      })
    },
    newPay (obj) {
      this.$http.post('http://218.104.153.143:8089/numberone-auth/busiOrderDtl/genPaySsn.shtml', obj, {
        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
        emulateJSON: true
      }).then((data) => {
        this.$message({
          message: ' 付款单生成成功',
          type: 'success',
          duration: 1000,
          showClose: false
        })
        this.$store.dispatch('setTab', 'order')
        this.$router.push('/home/homeorder')
      }, (ne) => {
        this.$message({
          message: '网络错误',
          type: 'error',
          duration: 1000,
          showClose: false
        })
      })
    }
  },
  computed: {
    calcPrice () {
      if (this.$store.state.user.level === 3) {
        this.productInfo.price = (this.$store.state.price * this.productInfo.amount * 0.45).toFixed(2)
        return this.productInfo.price
      } else if (this.$store.state.user.level === 1) {
        this.productInfo.price = (this.$store.state.price * this.productInfo.amount * 0.8).toFixed(2)
        return this.productInfo.price
      } else if (this.$store.state.user.level === 2) {
        this.productInfo.price = (this.$store.state.price * this.productInfo.amount * 0.6).toFixed(2)
        return this.productInfo.price
      } else {
        this.productInfo.price = (this.$store.state.price * this.productInfo.amount).toFixed(2)
        return this.productInfo.price
      }
    },
    newPrice () {
      if (this.$store.state.user.level === 3) {
        this.productInfo.price = (this.$store.state.price * 0.45).toFixed(2)
        return this.productInfo.price
      } else if (this.$store.state.user.level === 1) {
        this.productInfo.price = (this.$store.state.price * 0.8).toFixed(2)
        return this.productInfo.price
      } else if (this.$store.state.user.level === 2) {
        this.productInfo.price = (this.$store.state.price * 0.6).toFixed(2)
        return this.productInfo.price
      } else {
        this.productInfo.price = this.$store.state.price.toFixed(2)
        return this.productInfo.price
      }
    }
  }
}
</script>

<style lang="scss" type="stylesheet/scss">
.shoppingPurchase {
  font-size: 14px;
  background-color: #eee;
  .el-collapse-item__header__arrow{
    display: none;
  }
  .price-info{
    span:nth-of-type(1){
      color:red;
    }
    span:nth-of-type(2){
      color:#8391a5;
      text-decoration: line-through;
      margin-left: 5px;
    }
  }
  .phone{
    margin-left:15px;
  }
  .project{
    padding:10px 0;
    border-bottom:1px solid #e3e3e3;
  }
  .recipient {
    text-align: left;
    border: 1px solid #999;
    border-left: 0;
    border-right: 0;
    background-color: #fff;
    margin-bottom: 5px;
    .title {
      margin: 0 10px;
      line-height: 30px;
      border-bottom: 1px solid #eee;
    }
    .content {
      display: flex;
      justify-content: flex-start;
      height: 60px;
      margin: 10px;
      .userInfo {
        .topPart {
          display: flex;
          justify-content: flex-start;
          line-height: 20px;
          .nickName {
            margin-right: 20px;
          }
        }
      }
      .userIcon {
        text-align: center;
        line-height: 60px;
      }
    }
  }
  .purchase {
    text-align: left;
    border: 1px solid #999;
    border-left: 0;
    border-right: 0;
    background-color: #fff;
    margin-bottom: 5px;
    .title {
      margin: 0 10px;
      line-height: 30px;
      border-bottom: 1px solid #eee;
    }
    .content {
      .purchaseImg {
        padding: 10px;
      }
      .purchaseInfo {
        padding: 10px;
        line-height: 25px;
        .topPart {
          display: flex;
          justify-content: space-between;
        }
        .amount {
          display: flex;
          justify-content: space-between;
          .el-input-number {
            width: 100px;
            .el-input__inner {
              border-color: #bfcbd9;
            }
          }
          .el-input-number__decrease:hover,
          .el-input-number__increase:hover {
            color: #eee;
          }
        }
      }
      .purchasePrice {
        text-align: right;
        padding: 0 15px 10px 0;
        font-size: 16px;
        color: red;
        span {
          font-size: 14px;
          margin-right: 10px;
        }
      }
    }
  }
  .payMethod {
    text-align: left;
    border: 1px solid #999;
    border-left: 0;
    border-right: 0;
    background-color: #fff;
    .title {
      margin: 0 10px;
      line-height: 30px;
      border-bottom: 1px solid #eee;
    }
    .el-collapse {
      background-color: #fff;
      .el-collapse-item__wrap {
        background-color: #fff;
      }
    }
    .bankcardInfo {
      line-height: 30px;
      display: flex;
      justify-content: space-around;
    }
    .addBankcard {
      padding: 0 10px;
      line-height: 30px;
      i {
        margin-right: 10px;
      }
    }
  }
  .submit {
    padding: 30px 50px;
    background-color: #fff;
    display: flex;
    justify-content: center;
    .el-button {
      padding: 15px 100px;
      border-radius: 20px;
      font-size: 16px;
      letter-spacing: 5px;
    }
  }
}
</style>
